<!DOCTYPE html>
<body>
<div id=host1>
  <template shadowrootmode=open>
    <div>hello world</div>
  </template>
</div>
<div id=host2>
  <template shadowrootmode=closed>
    <div>hello world</div>
  </template>
</div>
<div id=host3>
  <template shadowrootmode=open shadowrootdelegatesfocus=true>
    <div>hello world</div>
  </template>
</div>
<div id=host4>
  <template shadowrootmode=open>
    <slot></slot>
  </template>
  <div>light dom slotted</div>
</div>
<div id=host5>
  <div>light dom</div>
</div>
<script>
host5.attachShadow({mode: 'open'}).innerHTML = '<div>hello world</div>';
</script>
<div id=host6></div>
<script>
host6.attachShadow({mode: 'open'}).innerHTML = '<div>hello world</div>';
</script>
<div id=host7><template shadowrootmode=open></template></div>
